<template>
  <div
    class="link-node-info"
    :class="{ 'is-empty': data.isEmpty }"
    @click="nodeClick"
    @drop="onDrop($event)"
    @dragover="(e) => e.preventDefault()"
    @dragenter="onDragEnter($event)"
    @dragleave="onDragLeave($event)"
  >
    <div class="link-node-title" style="height: 28px; padding: 5px 8px">
      <icon-book class="link-node-icon" v-if="!data.isEmpty" />
      <div class="link-node-name">{{ data.title }}</div>
      <div class="link-node-handle">
        <a-dropdown v-if="!data.isEmpty" append-to-body trigger="hover">
          <icon-more-vertical />
          <template #content>
            <a-doption @click="activeCommand('selected')">
              <icon-code />
              <span>字段选择</span>
            </a-doption>
            <a-doption @click="visible = !visible" style="color: #ed4014" v-if="data.isLeaf">
              <icon-close />
              <span>删除</span>
            </a-doption>
          </template>
        </a-dropdown>
      </div>
    </div>
    <a-modal v-model:visible="visible" :title="`确定要删除 [ ${data.title} ] 吗？`" @ok="nodeRemove">
      删除后，将清除此表相关配置，请谨慎操作。
    </a-modal>
  </div>
</template>

<script setup>
import { computed, inject, ref } from "vue"
import { Message as message } from "@arco-design/web-vue"
const visible = ref(false)
defineOptions({
  name: "link-node"
})
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  defaultIcon: {
    type: String,
    default: "table"
  }
})

const LinkNodeInstance = inject("LinkNodeInstance", {})
const node = computed(() => [
  LinkNodeInstance.states.flatState,
  LinkNodeInstance.states.flatState.find((v) => v.nodeIndex === props.data.nodeIndex)
])

// 操作事件
function activeCommand(name) {
  if (name === "selected") {
    nodeClick()
  } else if (name === "remove") {
    visible.value = true
  }
}

function nodeClick() {
  if (props.data.isEmpty) return
  LinkNodeInstance.handleNodeClick(props.data.nodeIndex)
}

function nodeRemove() {
  if (props.data.isEmpty) return
  LinkNodeInstance.handleNodeRemove(props.data.nodeIndex)
}

let lastElement = null

// 字段拖动进入
function onDragEnter(e) {
  lastElement = e.target
  LinkNodeInstance.onNodeDragenter(props.data.nodeIndex)
}

function onDragLeave(e) {
  if (lastElement === e.target) {
    LinkNodeInstance.onNodeDragleave(props.data.nodeIndex)
  }
}

// 字段填充
function onDrop(e) {
  LinkNodeInstance.onNodeDrop(props.data.nodeIndex, e.dataTransfer.getData("id"))
}
// export default {
//   name: "link-node",
//   props: {
//     data: {
//       type: Object,
//       default: () => ({}),
//     },
//     defaultIcon: {
//       type: String,
//       default: "table",
//     },
//   },
//   setup(props) {

//     return {
//       node,
//       activeCommand,
//       nodeClick,
//       onDragEnter,
//       onDragLeave,
//       onDrop,
//       visible,
//     };
//   },
// };
</script>

<style scoped lang="less">
.link-node {
  &-info {
    position: absolute;
    background: #fff;
    color: #000;
    cursor: pointer;
    border: 1px solid transparent;
    width: 180px;
    height: 30px;

    .link-node-name {
      flex: 1;
      padding: 0 14px 0 4px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 12px;
      line-height: 1.5;
    }

    &:hover {
      padding: 0;
      border: 1px solid rgb(var(--primary-6));
    }

    &.is-empty {
      padding: 0;
      border: 1px dashed rgb(var(--primary-6));
    }
  }

  &-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;

    &:before {
      position: absolute;
      content: "";
      top: -1px;
      bottom: -1px;
      left: -1px;
      width: 2px;
      background-color: rgb(var(--primary-6));
    }

    .link-node-icon {
      flex-shrink: 0;
      width: 16px;
      font-size: 16px;
      color: rgb(var(--primary-6));
    }
  }

  &-handle {
    position: absolute;
    top: 3px;
    right: -10px;
    flex-shrink: 0;
    padding-right: 1px;
    display: flex;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;

    .b-iconfont {
      padding: 4px 0 0 3px;
      width: 28px;
      height: 28px;
      font-size: 20px;
      line-height: 24px;
      transform: rotate(90deg);
      outline: none;
    }
  }
}
</style>
